<template>
  <view class="Allauthoriza">
    <u-navbar title="车友验证" :is-back="false" title-color="#333"></u-navbar>
    <view class="authoriza" v-if="userinfo">
      <view class="authoriza_top">
        <view class="">
          <text
            style="width: 50%; margin-top: 20rpx; font-size: 32rpx; line-height: 50rpx"
            v-if="userinfo.union_text && !Rebind"
          >
            您已成为{{ text }}车友，可享受专享优惠
          </text>
          <text style="width: 50%; margin-top: 20rpx; font-size: 32rpx; line-height: 50rpx" v-else>
            {{ text }}车友验证，完成验证后，可享受专享优惠
          </text>
          <text></text>
        </view>
      </view>
      <view class="phones">
        <view class="phones_tel">
          <text style="font-size: 30rpx">姓名</text>
          <input
            type="text"
            :placeholder="userinfo.realname ? userinfo.realname : '请输入您的真实姓名'"
            v-model="name"
            style="width: 80%"
            @input="fpNumInput"
            maxlength="3"
            :disabled="userinfo.union_text ? true : false"
          />
        </view>
        <view class="phones_tel">
          <text style="font-size: 30rpx">手机号</text>
          <input
            type="number"
            :placeholder="userinfo.mobile ? userinfo.mobile : '请输入手机号码'"
            maxlength="11"
            v-model="phone"
            style="width: 80%"
            :disabled="userinfo.mobile ? true : false"
          />
        </view>
        <view class="phones_tel" v-if="!userinfo.mobile">
          <text style="font-size: 30rpx">验证码</text>
          <view class="phones_code">
            <input v-model="code" style="width: 50%" placeholder="请输入验证码" type="number" maxlength="4" />
            <view class="_code" @click="handleCodeClick('100')">{{ textArea }}</view>
          </view>
        </view>
      </view>
      <view class="phone_bottom" v-if="userinfo.mobile && userinfo.union_text && !Rebind">
        <view class="" @click="sure()">确定</view>
      </view>
      <view class="phone_bottom" v-else><view class="" @click="submit()">接受</view></view>
      <view class="phone_bottom" @click="follow()"><view class="">关注公众号</view></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getDriverID } from '@/stores/driverID';
import { showToast, successToast,showLoading } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import { follow} from '@/utils/copyText';
import { nextTick, onMounted, ref } from 'vue';
import { useUserStore } from '@/stores/user';
import { decrypt } from '@/utils/jsencrypt';

const driver_id = getDriverID();

const name = ref(''); //用户姓名
const phone = ref('');
const code = ref('');
const textArea = ref('验证码');
const btnBool = ref(true); //放重复点击

const Rebind = ref(false);
const text = ref('');

const userinfo = useUserStore();
const repeat = ref(true); //放重复点击

const all=ref()

onMounted(() => {
  const loct = uni.getStorageSync('StoreData')
  all.value = JSON.parse(decrypt(loct))
  text.value=all.value.AssocName
  userInfor();
});
/**
 * 获取用户信息
 */
function userInfor() {
  if (userinfo.union_text && userinfo.union_text != text && text) {
    Rebind.value = true;
  }
}
/**
 * 正则输入的数据
 */
function fpNumInput(e) {
  const { detail } = e;
  const inputRule = /[^\u4E00-\u9FA5]/g; ///只能输入中文
  const value = detail.value.replace(inputRule, '');
  nextTick(() => {
    name.value = value;
  });
}
/**
 * 正则手机号码
 */
function phoneTel() {
  const mobile = /^1[3-9]\d{9}$/;
  const userPhone = userinfo && userinfo.mobile ? userinfo.mobile : phone.value;
  return mobile.test(userPhone);
}
/**
 * 发送验证码
 */
function handleCodeClick() {
  if (!phone.value) {
    showToast('手机号不能为空');
    return;
  } else if (!phoneTel()) {
    showToast('请输入正确的手机号码');
    return;
  }
  if (btnBool.value) {
    btnBool.value = false;
    const payload = {
      event: 'notice',
      mobile: phone.value,
    };
    toPublish('driver/sendSms', payload, (obj: any) => {
      console.log(obj);
    });
    successToast('发送成功');
    let i = 60;
    let timer = setInterval(() => {
      textArea.value = +i + 's';
      i--;
      if (i < 0) {
        btnBool.value = true;
        textArea.value = '验证码';
        clearInterval(timer);
      }
    }, 1000);
  } else {
    return;
  }
}
function sure() {
  uni.redirectTo({
    url: '/pages/index/filling',
  });
}
/**
 * 判断提交授权
 */
function submit() {
  const mobile = phone.value ? phone.value : userinfo.mobile;
  const real_name = name.value ? name.value : userinfo.realname;
  if (!mobile || !real_name) {
    showToast('请将补全验证信息');
    return;
  } else if (!phoneTel()) {
    showToast('请输入正确的手机号码');
    return;
  }
  if (Rebind.value) {
    const title = '大佬，您当前身份为' + userinfo.union_text + '加盟司机，是否切换到' + text + '加盟司机身份';
    uni.showModal({
      title: '温馨提示',
      content: title,
      success: function(res) {
        if (res.confirm) {
          submit_s(mobile, real_name);
        } else if (res.cancel) {
          uni.redirectTo({
            url: '/pages/index/filling',
          });
        }
      },
    });
  } else {
    submit_s(mobile, real_name);
  }
}
/**
 * 确认提交授权
 */
function submit_s(mobile, real_name) {
  const union_id=Number(all.value.AssocID)
  const price_group_id=Number(all.value.AssocPrice)
  const payload = {
    driver_id,
    union_id,
    price_group_id,
    mobile: mobile,
    real_name: real_name,
    captcha: code.value,
  };
  showLoading();
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  toPublish('driver/addUinonDriver', payload, (obj: any) => {
    const ref = obj;
    if (ref.code === 1) {
      successToast('绑定成功');
      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/index/filling',
        });
      }, 1500);
    } else {
      repeat.value = true
      showToast(ref.msg);
    }
  });
}
</script>

<style lang="less">
@import url('../login/less/customer.less');
</style>
